<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.main {
			color: #666;
			margin-top: 50px;
		}

		/* 定义keyframe动画，命名为blink */
		@keyframes blink {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		/* 添加兼容性前缀 */
		@-webkit-keyframes blink {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@-moz-keyframes blink {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@-ms-keyframes blink {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@-o-keyframes blink {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		/* 定义blink类*/
		.blink {
			color: #dd4814;
			animation: blink 1s linear infinite;
			/* 其它浏览器兼容性前缀 */
			-webkit-animation: blink 1s linear infinite;
			-moz-animation: blink 1s linear infinite;
			-ms-animation: blink 1s linear infinite;
			-o-animation: blink 1s linear infinite;
		}
		
		.blink2 {
			color: #dd4814;
			animation: blink2 1s linear infinite;
			/* 其它浏览器兼容性前缀 */
			-webkit-animation: blink2 1s linear infinite;
			-moz-animation: blink2 1s linear infinite;
			-ms-animation: blink2 1s linear infinite;
			-o-animation: blink2 1s linear infinite;
		}
		
		@-webkit-keyframes blink2 {
		    0% { opacity: 1; }
		    50% { opacity: 1; }
		    50.01% { opacity: 0; }
		    100% { opacity: 0; }
		}
	</style>
	<body>
		<div class="main">
			文字闪烁：<span class="blink">苏苏小苏苏</span>
		</div>
		<div class="main">
			文字闪烁：<span class="blink2">苏苏小苏苏</span>
		</div>
	</body>
</html>
